nav > ul > li > a,
.tool> ul > li > a{
    display: inline-block;
    width: auto;
    /* 外盒子相对定位，便于伪元素绝对定位(使下划线在文字的最底下) */
    position: relative;
}

nav > ul > li > a::before,
.tool> ul > li > a::before {
    content: '';
    height: 3px;
    background: rgb(255, 255, 255);
    /* 伪元素默认样式 display: inline;所以需要转成inline-block宽高才会生效 */
    display: inline-block;
    /* 通过定位使下划线在最低层 */
    position: absolute;
    bottom: -3px;
    width: 0;
    /* 加上一个过渡效果，使之丝滑一些 */
    transition: width 0.36s;
}

nav > ul > li > a:hover::before,
.tool> ul > li > a:hover::before{
    /* 悬浮时候，让下划线伪元素宽度变成100%即可出现效果 */
    width: 100%;
}

nav > ul > li > a{
    margin-bottom: 0px;
}

/*  
        思路：
            1. 使用伪元素创建下划线
            2. 通过定位让下划线的位置在文字的底部
            3. 初始下划线宽度为0
            4. 悬浮时更改为100%即出现效果 */
            
            